<template>
	<div class="layout" style="height: 100%;">
		<el-tabs v-model="activeName2" type="border-card" style="height: 100%;">
			<el-tab-pane label="设置" name="first" style="height: 100%;">
				<div class="container">
					<el-row class="tac" :gutter="20">
						<el-col :span="5" class="tree">
							<div class="dataSource">
								<el-tree class="elTree" :data="data1" :props="defaultProps" highlight-current :expand-on-click-node="false" @node-click="handleNodeClick" node-key="id" :default-expanded-keys="[1, 4]"></el-tree>
							</div>
						</el-col>
						<!-- <el-col :span="1">
							&nbsp;
						</el-col> -->
						<el-col  :span="18" style="padding-right: 20px">
								<div class="breadcrumb">
						      <el-breadcrumb class="des" separator-class="el-icon-arrow-right">
						        <el-breadcrumb-item :to="{ path: '/dashboard/SystemManagement/System' }">参数配置
						        </el-breadcrumb-item>
						        <el-breadcrumb-item>{{bread1}}</el-breadcrumb-item>
						      </el-breadcrumb>
								</div>
								<div class="decorationLine"></div>
								<el-row>
			        		<span><mailTable :tableData="tableData" :tableStyle="{ width:'100%' }"></mailTable></span>
								</el-row>
							</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="用户管理" name="second" class="des" style="height: 100%;">
				<div class="container">
					<el-row class="tac" :gutter="20">
						<el-col :span="5" class="tree">
							<div class="dataSource">
								<el-tree class="elTree" :data="data2" :props="defaultProps" highlight-current :expand-on-click-node="false" @node-click="handleNodeClick" node-key="id" :default-expanded-keys="[1, 4]"></el-tree>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-tab-pane>
			<el-tab-pane label="个人中心" name="third" class="des" style="height: 100%;">
				<div class="container des">
					<el-form ref="form" :model="form" label-width="70px" class="formStyle">
					  <el-form-item label="用户名" class="des">
					    <el-input v-model="form.name" disabled></el-input>
					  </el-form-item>
						<el-form-item label="密码">
							<el-input v-model="form.password" disabled></el-input>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>

import axios from 'axios'
import qs from 'qs'
import mailTable from '@/components/comp/MailTable'

  export default {
    created(){                   //乱，有时候：，有时候是（）
      this.getTableData();
    },
  	data() {
    	return {
				activeName2:'first',//标签页默认值
				form: {
          name: 'admin',
          password: 'admin'
        },
    		data1: [{
    			label: '参数配置',
    			children: [{
    				id: 1,
    				label: '关系数据库元模型',
  				},
  				{
  					id: 2,
  					label: 'Kettle服务器',
  				}],

  			}],
				data2: [{
  				label:"用户管理",          //这样写会和前面冲突
  				children:[{
  					id:3,
  					label:'用户',
  				},
  				{
  					id:4,
  					label:'角色',
  				},
  				{
  					id:5,
  					label:'权限',
  				}]
  			}],
        activeName: 'first',
        tableData:[],
  			defaultProps: {
  				children: 'children',
  				label: 'label'               //此处label对应上面data中的，可以改变
  			},
				bread1: ''
  		};
  	},
    components:{
      mailTable
    },
  	methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleNodeClick(data) {
        console.log(data.label);
				this.bread1 = data.label
      },
      getTableData(){
        let vm=this
        axios.get('/systemInfo/getSystemInfo')
          //http://116.62.196.234:8080/MT/sourcesystem/getAllSourcesystems
          .then(function (response) {
            console.log(response);
            console.log(response.data.data);
            // let tempTable = [];
            // console.log(typeof(tempTable));
            // tempTable.push(response.data.data);
            // vm.tableData = tempTable;
            vm.tableData=response.data.data;
            console.log(vm.tableData);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  };


</script>


<style scoped>
.layout-relational{
	padding-left: 10px;
}
.layout-relational{
	padding-left: 10px;
}

.metaModel-add{
	position:relative;
	width: 30%;
}
.metaModel-delete{
	position:absolute;
	width: 30%;
	left: 35%;
}
.metaModel-modify{
	position:absolute;
	right: 0px;
	width: 30%;
}
.add{
    position: absolute;
    right: 0px;
  }
  .attributeList{
    font-size: 16px;
  }
	.dataSource{
	  background-color: #EBEEF5;
	  height:300px;
	  overflow-y: scroll;
		width: 280px;
	}
	.elTree {
		font-size: 16px;
		background-color: #EBEEF5;
	}
	.breadcrumb {
		margin-top: 10px;
		margin-bottom:10px;
	}
	.buttonGroup{
		margin-top: 10px;
	}
	.decorationLine{
	height:1px;
	width:100%;
	background:#E4E7ED;
	overflow:hidden;
	margin-top:20px;
	margin-bottom:20px;
	}
	.des{
		font-size: 16px;
	}
	.container {
	  height:400px;
	  overflow-y: scroll;
	  overflow-x: hidden;
	}
	.formStyle {
		width:70%;
		margin-left:15%;
		margin-right:15%;
		margin-top:5%
	}
</style>
